/**
 * 匠言知识付费v3.0.0
 * Author: 山西匠言网络科技有限公司
 * 这不是一个免费软件，它受限于许可条款，你可以访问https://www.zsfzxkc.cn/获取更多详细信息。
 * This is not a free software, it under the license terms, you can visit https://www.zsffzxkc.cn/ get more details.
 */
<template>
	<view>
		<view class="quick_btn" @click="showbtn">
			<image class="quick_btn_icon" src="/static/andy-ADTabbar/quickbtn.png" mode="aspectFit"></image>
		</view>
		<view class="btns" v-if="btns_show">
			<view class="btns-item" @click="navigate('index')">
				<image class="icon1" src="/static/andy-ADTabbar/home2.png" mode="aspectFit"></image>
				<view class="icon1text">首页</view>
			</view>
			<view class="btns-item" @click="navigate('user')">
				<image class="icon1" src="/static/andy-ADTabbar/my2.png" mode="aspectFit"></image>
				<view class="icon1text">我的</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="btns-item" @click="qrcode_show">
				<image class="icon1" src="/static/andy-ADTabbar/qrcode.png" mode="aspectFit"></image>
				<view class="icon1text" style="font-size: 20upx;">公众号</view>
			</view>
			<!-- #endif -->
			<view class="btns-item" @click="back">
				<image class="icon1" src="/static/andy-ADTabbar/back.png" mode="aspectFit"></image>
				<view class="icon1text">返回</view>
			</view>
		</view>
		<!-- 二维码、电话 -->
		<view class="contact" v-if="qrcode">
			<image class="gzh" :src="base_set.h5.gzh_qrcode" mode="aspectFit"></image>
			<view class="gztextbox"><text class="gztext">关注公众号</text></view> 
			<view class="gztextbox" @click="make_phone1"><text class="gztext">客服电话：{{base_set.phone}}</text><button type="primary" size="mini">一键拨号</button></view>
			<image class="closebtn" src="../../static/close.png" mode="aspectFit" @click="closewechat"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name:"jy-quick-btns",
		data() {
			return {
				btns_show:false,
				qrcode:false,
				base_set:[]
			};
		},
		created() {
			this.base_set = uni.getStorageSync('base_set');
			// console.log(this.base_set);
		},
		methods:{
			closewechat(){
				this.qrcode=false
			},
			qrcode_show(){
				this.qrcode = true
			},
			showbtn(){
				this.btns_show == true?this.btns_show = false:this.btns_show = true;
				
			},
			navigate(e){
				uni.redirectTo({
					url:`/pages/${e}/${e}`
				})
			},
			back(){
				uni.navigateBack()
			},
			make_phone1(){
				if(this.base_set.phone !=''){
					uni.makePhoneCall({
						phoneNumber: this.base_set.phone
					});
				}else{
					uni.showToast({
						title:'暂未设置客服联系方式！',
						icon:'none'
					})
				}
			},
		}
	}
</script>

<style lang="less">
	.contact{
		background: rgba(9,9,9,.6);
		position: fixed;
		height: 100vh;
		width: 100%;
		top:0;
		left:0;
		z-index: 999999;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.gztextbox{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 50upx;
		margin-top: 20upx;
	}
	.gztext{
		color: #fff;
		margin-right: 20upx;
	}
	.closebtn{
		width: 40upx;
		height: 40upx;
		margin-top: 50upx;
	}
	.gzh{
		width: 60%;
	}
	.quick_btn{
		bottom: 180upx;
		right: 25upx;
		position: fixed;
		z-index: 9999999;
	}
	.quick_btn_icon{
		width: 50upx;
		height: 50upx;
		box-shadow: 6rpx 6rpx 20rpx rgba(0, 0, 0, .5);
		border-radius: 50%;
	}
	.btns{
		background-color: rgba(9,9,9,.4);
		padding: 10upx 5upx;
		border-radius: 15upx;
		bottom: 260upx;
		right: 20upx;
		position: fixed;
		z-index: 9999999;
		
	}
	.btns-item{
		display: flex;
		width: 50upx;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		padding: 10upx 0;
		
	}
	.icon1{
		width: 45upx;
		height: 45upx;
	}
	.icon1text{
		text-align: center;
		margin-top: 5upx;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		color: #fff;
		font-size: 20upx;
	}
</style>
